<template>
  <div class="main">
    <div class="head">
      <h3>账号密码登录</h3>
    </div>
    <template>
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="国家和地区  "
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
    </template>
    <van-form @submit="onsubmit">
      <div class="china"></div>
      <div class="login">
        <template>
          <van-field
            v-model="phone"
            name="phone"
            label="+86"
            placeholder="手机号码"
            :rules="[
              { required: true, message: '请填写手机号码' },
              { pattern: reg.phone, message: '请输入有效的手机号码' },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </template>
      </div>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="voluntarily">
      <div><input type="checkbox" class="check" /><span>自动登录</span></div>
      <span @click="gotopage('logincode')"
        >短信验证码登录/<span>忘记密码</span></span
      >
    </div>
  </div>
</template>
<script>
import {Notify} from "vant";
export default {
  name: "login",
  data() {
    return {
      radio: "1",
      phone: this.phone,
      password: this.password,
      show: false,
      fieldValue: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "中国",
          value: "86",
          children: [
            { text: "大陆", value: "86" },
            { text: "台湾", value: "86" },
            { text: "香港", value: "86" },
          ],
        },
        {
          text: "老挝",
          value: "00",
          children: [{ text: "森林", value: "00" }],
        },
        {
          text: "缅甸",
          value: "001",
          children: [{ text: "金三角", value: "001" }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },

    onsubmit(value) {
      // 先判断是否含有这个用户
      this.$ajax
        .findUser({
          phone: value.phone,
          password: value.password,
        })
        .then((res) => {
          if (res.length > 0) {
            Notify({ type: "success", message: "登陆成功" });


            console.log(this.fromRoute)
            if(this.fromRoute!='mine'){
              this.$router.go(-1)
            }else{
              this.$router.push({name:'mine'})
            }

            
            this.$router.push({ name: "mine" });
            //用户信息存储
            this.changeUserInfo(res[0]);
            localStorage.setItem("userInfo", JSON.stringify(res[0]));
          } else {
            Notify("手机号码或者密码错误");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #999;
  padding-bottom: 10px;
  .china {
    background-color: white;
    margin: 10px;
    margin-top: 10px;
    border: 1px solid #daf;
    border-radius: 8px !important;
  }
  .check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    span{
      line-height: 26px !important;
    }
  }
  .voluntarily {
    display: flex;
    justify-content: space-around;
    background-color: white;
    margin: 10px;
    border-radius: 8px;
    align-items: center;
    div {
      display: flex;
    }
  }
  .login {
    margin: 10px;
  }
}
.head {
  background-color: #000;
  position: relative;
  height: 60px;
  line-height: 60px;
  top: -20px;
  width: 100%;
  color: #fff;
  h3 {
    font-weight: normal;
  }
}
</style>